﻿<!DOCTYPE html>
<html>
	<head runat="server">
		<title>JS &amp; AJAX Training</title>
		<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
		<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
	</head>

	<body>
		<form runat="server" id="frmPage">
			<section class="page">
				<ul class="nav">
					<li><a href="JS.html">JavaScript beyond basics</a></li>
					<li><a href="jquery.html">basic jQuery</a></li>
					<li><a href="Ajax.html">AJAX</a></li>
				</ul>
				<header>
					<h1>JS &amp; AJAX</h1>
				</header>
				<section class="main">
					<h2>Basic jQuery</h2>
	
					<h3>Basic information</h3>
					<ul>
						<li class="someClass">Global <code>jQuery</code> object</li>
						<li>Shortcut: <code>$</code> object</li>
						<li>Main pattern: select something and do something with it</li>
					</ul>

					<h3>Selectors</h3>
					<h4>Basic</h4>
					<dl>
						<dt>Tag: <code>$("p")</code></dt>
						<dd>Selects nodes by type.</dd>
		
						<dt class="importantTerm someClass">Class: <code>$(".importantTerm")</code></dt>
						<dd class="importantTerm">Selects nodes by their CSS class.</dd>
		
						<dt id="thirdDefinition">ID: <code>$("#thirdDefinition")</code></dt>
						<dd class="importantTerm">Selects node <strong>(just one!)</strong> by its ID.</dd>
		
						<dt>Attribute: <code>$("[class]")</code></dt>
						<dd>Selects nodes with the specified attribute.</dd>
		
						<dt>Universal: <code>$("*")</code></dt>
						<dd>Selects everything.</dd>
					</dl>
	
					<h4>Combinators</h4>
					<dl>
						<dt>Or: <code>$("li, .importantTerm")</code></dt>
						<dd>Returns a sum of results returned by individual selectors.</dd>
		
						<dt>And: <code>$("dt.someClass")</code> (no whitespace)</dt>
						<dd>Returns a common part of results returned by individual selectors.</dd>
		
						<dt>Descendant: <code>$("p strong")</code>(whitespace)</dt>
						<dd>Returns elements that are descendants of a specified parent.</dd>

						<dt>Child: <code>$("p > strong")</code></dt>
						<dd>Returns only the elements that are direct children of a specified parent.</dd>
					</dl>
	
					<p>
						Wait, there's more: <a href="http://api.jquery.com/category/selectors/">http://api.jquery.com/category/selectors</a>!
					</p>
	
					<h4>Might be useful</h4>
					<ul>
						<li>Selectors are internally evaluated from right to left</li>
						<li>You can escape special characters by <code>\\</code></li>
					</ul>

					<h3>DOM manipulation</h3>
					<ul>
						<li>jQuery simplifies operations on DOM</li>
						<li>
							Useful methods: <code>append</code>, <code>prepend</code>, <code>attr</code>, <code>clone</code>, 
							<code>detach</code>, <code>html</code>, <code>text</code>, <code>addClass</code>...
						</li>
					</ul>
	
					<h3>Events</h3>
					<ul>
						<li>The old way: <code>bind</code>, <code>unbind</code>, <code>live</code>, <code>die</code>, <code>delegate</code>, <code>undelegate</code>...</li>
						<li>Now replaced by three standarized functions: <code>on</code>, <code>off</code>, <code>one</code></li>
						<li>Firing events: <code>trigger</code> function</li>
					</ul>
	
					<h4>The almighty <code>on</code></h4>
					<p>Syntax: <code>on(events [, selector] [, data], handler(eventObject))</code></p>
					<p>Examples:</p>
					<ul>
						<li><code>$("ul li").on("click", function() { alert("clicked on li"); })</code></li>
						<li><code>$("ul").on("click", "li", function() { alert("clicked on li"); })</code></li>
					</ul>

					<h3>Eye-candy</h3>
					<ul>
						<li><code>addClass</code> - adds CSS class</li>
						<li><code>css</code> - changes individual CSS properties (addClass is recommended)</li>
						<li><code>animate</code> - changes CSS properties in time</li>
					</ul>
		
					<p class="bacon">
						<span><strong>Bacon</strong> ipsum dolor sit amet</span> <strong>chicken</strong> ham pastrami spare ribs strip steak fatback sirloin beef ribs. 
						Tongue short ribs kielbasa bacon, prosciutto short loin chicken venison turducken spare ribs. 
						Kielbasa pork chop swine capicola, short ribs venison flank tenderloin shankle pork loin. 
						Biltong tenderloin brisket, turkey flank frankfurter ham hock leberkas salami chuck beef ribeye drumstick. 
						Shankle short loin ribeye, flank short ribs pork chop shank hamburger ham prosciutto venison jowl swine. 
						Drumstick prosciutto sausage shank, jerky pancetta cow pork belly swine tenderloin. 
						Pastrami andouille ham sirloin corned beef venison salami chuck spare ribs tenderloin bresaola ribeye fatback short ribs.
					</p>

					<div class="square"></div>
					<div class="square"></div>
					<div class="square"></div>

					<script src="/Scripts/jQuery.js"></script>
				</section>
			</section>
		</form>
	</body>
</html>
